<!-- 
 * 注册用户个人详细信息
 * @author: 
 * @since: 2022-05-18
 * index.vue
-->
<template>
  <div class="register-user-info-container">
    <div class="title">个人实名认证</div>
    <div class="name common">
      <div class="key">姓 名：</div>
      <div class="value">{{ state.authentication.name }}</div>
    </div>
    <div class="idCard common">
      <div class="key">身份证号码：</div>
      <div class="value">{{ state.authentication.card }}</div>
    </div>
    <div class="idCardImg">
      <div class="img-item" v-for="(item, index) in state.authentication.filePath" :key="index">
        <el-image style="width: 100%; height: 100%" :src="item" fit="cover" @click="previewImg(index)"></el-image>
        <div class="idCardTitle">{{ index === 0 ? '身份证人像面' : index === 1 ? '身份证国徽面' : '手持身份证人像面' }}</div>
      </div>
      <!-- 图片查看器 -->
      <el-image-viewer v-if="isShowViewer" @close="() => (isShowViewer = false)" :url-list="activityImgViewerList" />
    </div>
  </div>
</template>

<script setup >
import { ref, reactive, defineProps, onMounted, defineEmits } from 'vue';
import { getUserAuthenticationInfoApi } from '@/api/interface/registerUserManage.js'


const props = defineProps({
  userInfo: {
    type: Object,
    default: () => { }
  }
})

const state = reactive({
  authentication: {},//认证信息
})

const isShowViewer = ref(false) //是否显示预览查看器
const activityImgViewerList = ref([])//店铺照片预览列表

const emit = defineEmits(['backInfo'])

onMounted(() => {
  getUserAuthenticationInfo()
})


//获取用户认证信息
const getUserAuthenticationInfo = () => {
  const params = {
    userName: props.userInfo.userName
  }
  getUserAuthenticationInfoApi(params).then(res => {
    const { status, data } = res
    if (status === 200) {
      state.authentication = data[0]
      emit('backInfo', data[0])
    }
  })
}
//预览照片
const previewImg = (index) => {
  isShowViewer.value = true
  let tempImgList = [...state.authentication.filePath];
  let currentImgList = tempImgList.filter((item, i) => i === index)
  tempImgList = tempImgList.filter((item, i) => i !== index)
  activityImgViewerList.value = [...currentImgList, ...tempImgList]
}




</script>

<style lang="scss" scoped>
.register-user-info-container {
  .title {
    color: #333;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 40px;
  }
  .common {
    display: flex;
    margin-bottom: 30px;
    font-size: 14px;
    .key {
      color: #666666;
    }
    .value {
      font-weight: bold;
    }
  }
  .idCardImg {
    display: flex;
    .img-item {
      width: 280px;
      height: 170px;
      &:nth-child(2) {
        margin: 0 10px;
      }
    }
    .el-image {
      cursor: pointer;
      border-radius: 8px;
      margin-right: 40px;
    }
    .idCardTitle {
      width: 100%;
      text-align: center;
      font-size: 14px;
      margin-top: 10px;
    }
  }
}
</style>
